<template>
  <div ref="dom">
    <!-- {{ test }} -->
    {{ count }}
    {{ doubleCount }}
    <div v-show="count > 4">
      测试v-show
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed: {
    test2() {
      console.log(this.test + 'computed')
      return this.test + 'computed'
    },
    ...mapState('counter', [
      'count'
    ]),
    ...mapGetters(['doubleCount'])
  },
  watch: {
    obj: {
      handler(val) {
        console.log(val)
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      test: 1,
      obj: {
        name: 'abc',
        age: 16
      }
    }
  },
  // beforeCreate() {
  //   console.log('----beforeCreate----')
  //   console.log(this.test)
  //   this.test = 2
  //   console.log('----beforeCreate----')
  // },
  // created() {
  //   console.log('----created----')
  //   console.log(this.test)
  //   console.log('----created----')
  // },
  // beforeMount() {
  //   console.log('----beforeMount----')
  //   console.log(this.$refs.dom)
  //   console.log('----beforeMount----')
  // },
  mounted() {
    console.log('----mounted----')
    console.log(this.$refs.dom)
    setTimeout(() => {
      this.test = 512312
      this.obj.name = '456'
    }, 3000)
    this.$bus.$on('test', (val) => {
      console.log(val)
    })
    console.log('----mounted----')
  },
  // beforeUpdate() {
  //   console.log('----beforeUpdate----')
  //   console.log(this.test)
  //   console.log(this.$refs.dom.innerHTML)
  //   console.log('----beforeUpdate----')
  // },
  // updated() {
  //   console.log('----updated----')
  //   console.log(this.test)
  //   console.log('----updated----')
  // },
  // activated() {
  //   console.log('----activated----')
  //   console.log(this.test)
  //   console.log('----activated----')
  // }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
